<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .parent,.parent1{
            width: 300px;
            height: 300px;
            background: #888888;
        }
        .child,.child2{
            width: 200px;
            height: 200px;
            background: aqua;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="parent" @click="handleparent">大
<!--                              stop阻止冒泡  -->
        <div class="child" @click.stop="handleChild">小</div>
    </div>
</div>
<div style="height: 15px;"></div>
<div class="parent1">大
    <div class="child2">小</div>
</div>
<script src="../vue.js"></script>
<script>
    //DOM: Document Object Model(文档对象模型)
    //获取单个DOM
    var parent = document.querySelector('.parent1');
    var child = document.querySelector('.child2');
    //获取所有div标签的DOM
    var divs = document.querySelectorAll('div');
    console.log(divs)
    parent.onclick = function () {
        console.log('大')
    };
    child.onclick = function (event) {
        event.stopPropagation();//阻止冒泡
        console.log('小')
    }
    new Vue({
        el:'#app',
        methods:{
            handleparent(){
                console.log('大');
            },
            handleChild(){
                console.log('小')
            }
        }
    })
</script>

</body>
</html>